<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="700px"
    @open="handleDialogOpen()"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <!-- 制定干预方案  -->
    <el-col :span="24">
      <el-form
        :model="formModel"
        :rules="editRules"
        ref="userForm"
        label-width="80px"
        label-position="right"
        size="small"
      >
        <el-tabs type="border-card" v-model="activeTabName">
          <el-tab-pane name="userInfoTab" label="基本信息" class="user-info-tab-pane" >
            <el-col :span="12"
              ><el-form-item label="方案标题" prop="programmetitle"
                ><el-input
                  :maxlength="32"
                  v-model="formModel.programmetitle"
                ></el-input></el-form-item
            ></el-col>

            <el-col :span="12"
              ><el-form-item label="方案模板" prop="template"
                ><el-select v-model="formModel.template" placeholder="请选择">
                  <el-option
                    @change="tempList"
                    v-for="item in templateist"
                    :key="item.tempId"
                    :label="item.tempCrux"
                    :value="item.tempCrux"
                  >
                  </el-option> </el-select></el-form-item
            ></el-col>

            <el-col :span="12"
              ><el-form-item label="开始时间" prop="starttime"
                ><el-input
                  type="datetime-local"
                  :maxlength="32"
                  v-model="formModel.starttime"
                ></el-input></el-form-item
            ></el-col>

            <el-col :span="12"
              ><el-form-item label="结束时间" prop="endtime"
                ><el-input
                  type="datetime-local"
                  :maxlength="32"
                  v-model="formModel.endtime"
                ></el-input></el-form-item
            ></el-col>

            <el-col :span="24"
              ><el-form-item label="方案目标" prop="programmeobjectives"
                ><el-input
                  type="textarea"
                  :maxlength="32"
                  v-model="formModel.programmeobjectives"
                ></el-input></el-form-item
            ></el-col>

            <el-col :span="24"
              ><el-form-item label="执行人" prop="executor"
                ><el-select v-model="formModel.executor" placeholder="请选择">
                  <el-option
                    v-for="item in executorList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option> </el-select></el-form-item
            ></el-col>
          </el-tab-pane>

          <el-tab-pane label="饮食干预">
            <el-row>
              <el-col :span="12"
                ><el-form-item label="餐次:" prop="mealTimes"
                  ><el-select
                    v-model="formModel.mealTimes"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in mealTimesList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option></el-select></el-form-item
              ></el-col>
              <el-col :span="18"
                  ><el-form-item label="推荐食物:" prop="recommended"
                    >
                    <el-select
                      v-model="formModel.recommended"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in recommendedList"
                        :key="item.aryName"
                        :label="item.aryName"
                        :value="item.aryName"
                      >
                      </el-option> </el-select></el-form-item
                ></el-col>
              <el-col :span="18"
                ><el-form-item label="分量:" prop="weights"
                  ><el-input
                    :maxlength="32"
                    v-model="formModel.weights"
                    autofocus
                  ></el-input></el-form-item
              ></el-col>
              <el-col :span="18"
                ><el-form-item label="忌口:" prop="taboo"
                  ><el-input
                    :maxlength="32"
                    v-model="formModel.taboo"
                    autofocus
                  ></el-input></el-form-item
              ></el-col>
            </el-row>
            <el-form-item label="摄入热量:" prop="intakeCalories">
              <el-col :span="15">
                <el-input
                  :maxlength="32"
                  v-model="formModel.intakeCalories"
                  autofocus
                  ><template slot="append">kcal</template></el-input
                >
              </el-col>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="运动干预">
            <el-row>
              <el-col :span="18"
                  ><el-form-item label="运动名称:" prop="sportName"
                    >
                    <el-select
                      v-model="formModel.sportName"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in sportNameList"
                        :key="item.portName"
                        :label="item.portName"
                        :value="item.portName"
                      >
                      </el-option> </el-select></el-form-item
                ></el-col>
              <el-col :span="18"
                ><el-form-item label="运动周期" prop="movementPeriod"
                  ><el-input
                    :maxlength="32"
                    v-model="formModel.movementPeriod"
                    autofocus
                  ><template slot="append">周</template></el-input></el-form-item
              ></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"
                ><el-form-item label="运动时间:" prop="exerciseStartTime">
                  <el-time-select
                    placeholder="起始时间"
                    v-model="formModel.exerciseStartTime"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                    }"
                  >
                  </el-time-select>
                </el-form-item>
                <el-form-item prop="exerciseEndTime">
                  <el-time-select
                    placeholder="结束时间"
                    v-model="formModel.exerciseEndTime"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                      minTime: formModel.exerciseStartTime,
                    }"
                  >
                  </el-time-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="消耗热量:" prop="heatConsumption">
              <el-col :span="15">
                <el-input
                  :maxlength="32"
                  v-model="formModel.heatConsumption"
                  autofocus
                  ><template slot="append">kcal</template></el-input
                >
              </el-col>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="干预计划">
            <el-form-item label="干预形式:" prop="formIntervention">
                <el-col :span="12"
                  ><el-select
                      v-model="formModel.formIntervention"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in formInterventionList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option> </el-select>
                </el-col>
              </el-form-item>
            <el-form-item label="主要内容:" prop="primaryCoverage">
              <el-col :span="15">
                <el-input
                  type="textarea"
                  :maxlength="32"
                  v-model="formModel.primaryCoverage"
                  autofocus
                ></el-input>
              </el-col>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-col>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('userForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { upFormulate } from "@/api/HealthIntervention/program";
import { findByTempStart } from "@/api/HealthIntervention/Template";

export default {
  name: "formulate-edit",
  data() {
    return {
      loading: false,
      formModel: {
        fsId: 0,
        id: "",
        start: "",
        programmetitle: "",
        template: "",
        starttime: "",
        endtime: "",
        programmeobjectives: "",
        executor: "",
        mealTimes: "",
        recommended: "",
        weights: "",
        taboo: "",
        intakeCalories: "",
        sportName: "",
        movementPeriod: "",
        exerciseStartTime: "",
        exerciseEndTime: "",
        heatConsumption: "",
        formIntervention: "",
        primaryCoverage: "",
      },
      //干预形式
      formInterventionList:[
        { value: "微信干预", label: "微信干预" },
        { value: "电话干预", label: "电话干预" },
        { value: "邮箱干预", label: "邮箱干预" },
      ],
      //餐次
      mealTimesList: [
        { value: 1, label: "早,中,晚" },
        { value: 2, label: "早,中" },
        { value: 3, label: "早,晚" },
        { value: 4, label: "中,晚" },
      ],//推荐食品
      recommendedList:[],
      //运动名称
      sportNameList:[],
      
      //模板下拉框
      templateist: [],
      dialogProps: {
        visible: false,
        action: "",
        title: "",
      },
      //执行人
      executorList: [
        { value: "王顺", label: "王顺" },
        { value: "咳咳", label: "咳咳" },
        { value: "李学生", label: "李学生" },
      ],
      activeTabName: "userInfoTab",
      editRules: {
        programmetitle: [
          { required: true, message: "请输入标题名称", trigger: "blur" },
          {
            min: 2,
            max: 32,
            message: "长度在 2 到 32 个字符",
            trigger: "blur",
          },
        ],
        template: [
          { required: true, message: "请选择一个模板", trigger: "change" },
        ],
        starttime: [
          { required: true, message: "请输入开始时间", trigger: "blur" },
          {
            return: this.starttime < this.endtime,
            message: "开始时间不能大于结束时间",
            trigger: "blur",
          },
        ],
        endtime: [
          { required: true, message: "请输入结束时间", trigger: "blur" },
          {
            return: this.endtime > this.starttime,
            message: "结束时间不能小于开始时间",
            trigger: "blur",
          },
        ],
        executor: [
          { required: true, message: "请选择执行人", trigger: "change" },
        ],
        intakeCalories: [
          // { required: true, message: "请输入结束时间", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleDialogClose() {
      this.dialogProps.visible = false;
    },

    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["userForm"].clearValidate();
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveRouter();
          } else {
            this.doUpdateRouter();
          }
        } else {
          return false;
        }
      });
    },
    //修改
    doUpdateRouter() {
      this.loading = true;
      if(this.formModel.mealTimes == "早,中,晚"){
        this.formModel.mealTimes = 1
      }else if(this.formModel.mealTimes == "早,中"){
        this.formModel.mealTimes = 2
      }else if(this.formModel.mealTimes == "早,晚"){
        this.formModel.mealTimes = 3
      }else if(this.formModel.mealTimes == "中,晚"){
        this.formModel.mealTimes = 4
      }
      upFormulate(this.formModel)
        .then((response) => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
          this.$message({
            message: "已成功修改用户信息",
            type: "success",
          });
        })
        .catch((error) => {
          this.outputError(error);
        });
    },

    //全局提示
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  //下拉框
  created() {
    findByTempStart().then((response) => {
      this.templateist = response.data;
    });
  },
  mounted: function () {
    this.$nextTick(() => {
      this.$on("openEditFormulateUpDialog", function (program , sport , dietary) {
        if(program.mealTimes == 1){
          program.mealTimes = "早,中,晚"
        }else if(program.mealTimes == 2){
          program.mealTimes = "早,中"
        }else if(program.mealTimes == 3){
          program.mealTimes = "早,晚"
        }else if(program.mealTimes == 4){
          program.mealTimes = "中,晚"
        }
        this.formModel = program;
        this.sportNameList = sport;
        this.recommendedList = dietary;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "已制定干预方案";
        this.activeTabName = "userInfoTab";
        this.dialogProps.visible = true;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.user-info-tab-pane {
  margin-top: 20px;
}
</style>
